<extend name="./Application/Admin/View/Layout/application.html"/>

<block name="css">
    <link rel="stylesheet" href="__PUBLIC__/vendor/select2/dist/css/select2.min.css">
    <link rel="stylesheet" href="__PUBLIC__/vendor/colorpicker-master/dist/css/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="__PUBLIC__/vendor/datepicker-master/dist/css/bootstrap-datepicker.min.css">
</block>

<block name="content">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">新增文章</h3>
        </div>
        <div class="panel-body">

            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab">基本信息</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">文章内容</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <form class="form-horizontal" action="__SELF__" method="post">

                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">所属分类</label>
                            <div class="col-sm-10">
                                <select name="category_id" id="" class="form-control">
                                    <volist name="categories" id="category">
                                        <option value="{{$category.id}}">{{$category.name}}</option>
                                        <volist name="category.children" id="child">
                                            <option value="{{$child.id}}">
                                                &nbsp;&nbsp;&nbsp;&nbsp;|--{{$child.name}}
                                            </option>
                                        </volist>
                                    </volist>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">标题</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="title" id="title"
                                       placeholder="文章标题">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">标题颜色</label>
                            <div class="col-sm-10">
                                <div id="cp2" class="input-group colorpicker-component">
                                    <input type="text" name="color" value="#00AABB" class="form-control"/>
                                    <span class="input-group-addon"><i></i></span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">作者</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="author">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="thumb" class="col-sm-2 control-label">缩略图</label>
                            <div class="col-sm-8">
                                <input type="text" id="thumb" class="form-control" name="thumb">
                            </div>
                            <div class="col-sm-2">
                                <input type="button" value="上 传" id="ck_thumb_upload" class="btn btn-success"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <img src="" id="img_show" width="90px" height="90px"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">是否显示</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="is_show" value="1" checked> 是
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="is_show" value="0"> 否
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="create_time" class="col-sm-2 control-label">发布日期</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="time" id="create_time">
                            </div>
                        </div>

                    </div>

                    <div role="tabpanel" class="tab-pane" id="profile">
                        <textarea name="content" id="container" cols="30" rows="10"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">保 存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</block>

<block name="js">
    <script src="__PUBLIC__/vendor/select2/dist/js/select2.js"></script>
    <script src="__PUBLIC__/vendor/select2/dist/js/i18n/zh-CN.js"></script>
    <script src="__PUBLIC__/vendor/colorpicker-master/dist/js/bootstrap-colorpicker.min.js"></script>
    <script src="__PUBLIC__/vendor/datepicker-master/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="__PUBLIC__/vendor/datepicker-master/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>

    <script src="__PUBLIC__/vendor/ckeditor/ckeditor.js"></script>
    <script src="__PUBLIC__/vendor/ckfinder/ckfinder.js"></script>
    <script>
        $(function () {
            $('select').select2();
            $('#cp2').colorpicker();
            $('#create_time').datepicker({
                format: 'yyyy-mm-dd',
                language: 'zh-CN'

            });

            //上传缩略图（单张图片）
            $("#ck_thumb_upload").click(function () {
                CKFinder.modal({
                    chooseFiles: true,
                    language: 'zh-cn',
                    onInit: function (finder) {
                        finder.on('files:choose', function (evt) {
                            var url = evt.data.files.first().getUrl();
                            $("#thumb").val(url);
                            $("#img_show").attr('src', url);
                        });
                    }
                });
            });

        })
    </script>
</block>